.wrapper {
  display: flex;
  align-items: center;
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--global-border);
}

.tabsList {
  display: flex;
  gap: var(--spacing-2);
}

.tabsTrigger {
  position: relative;
  display: flex;
  gap: var(--spacing-1half);
  align-items: center;
  padding: var(--spacing-1half) var(--spacing-3) var(--spacing-1half)
    var(--spacing-2);
  font-size: var(--font-size-4);
  font-weight: 500;
  color: var(--global-mute-text);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-md);
  transition: all 0.2s ease;
}

.tabsTrigger:hover {
  color: var(--global-foreground);
  background-color: var(--global-muted-background);
}

.tabsTrigger[data-state='active'] {
  color: var(--global-foreground);
}

.tabsTrigger[data-state='active']::after {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background-color: var(--primary-accent);
}
